<!DOCTYPE html>
<html>

	<head>
		<title>提交订单页</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../lib/weui.min.css">
		<link rel="stylesheet" href="../css/jquery-weui.css">
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="../font/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="css/firm-order.css"/>
		<style type="text/css">
			#renminbi:before{
				content: "￥";
			}
			.mayuecartnum:before{
				content: "x";
			}
		</style>
	</head>
	<body ontouchstart>
		<div>
			<div class="head">
				&nbsp;<a style="color: white;" href="../Business-details/Business-details.html"><span class="iconfont icon-back mayue-zuo"></span> 确认订单</a>
			</div>
			<div class="content">     
				<a class="weui-cell weui-cell_access" href="javascript:;">
					<div class="weui-cell__bd">
						<p @click="chooseaddress" v-html="address"></p>
						
					</div>
					<div class="weui-cell__ft"></div>
				</a>
				<div class="weui-cell">
					<div class="weui-cell__hd"><label for="time" class="weui-label">送达时间</label></div>
					<div class="weui-cell__bd">
						<input style="color: #999999;" class="weui-input weui-cell__ft" id="time" type="text" value="" readonly="">
					</div>
				</div>
				<a class="weui-cell weui-cell_access" href="javascript:;">
					<div class="weui-cell__bd">
						<p>支付方式</p>
					</div>
					<div class="weui-cell__ft">在线支付</div>
				</a>
				<div class="weui-cell">
					<div class="weui-cell__hd"><img src="../column/img/2017-03-30_143718.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
					<div class="weui-cell__bd">
						<p>您的订单详情</p>
					</div>
				</div>
				<!--动态生成-->
				<div class="weui-cell" v-for="item in list">
					<div class="weui-cell__bd">
						<p v-html="item.attributes.cartname"></p>
					</div>
					<div class="weui-cell__ft"><span class="mayuecartnum" v-html="item.attributes.cartnum"></span>&nbsp;&nbsp;<span id="renminbi" v-html="item.attributes.cartprice"></span></div>
				</div>
				<!---->
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<p>配送费</p>
					</div>
					<div class="weui-cell__ft">￥10</div>
				</div>
				<!--订单-->
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<p>订单￥<span>{{mayuezongjia}}</span></p>
					</div>
					<div class="weui-cell__ft"><b>待支付￥<span v-html="mayuezongjia"></span></b></div>
				</div>
				<div class="weui-cell weui-cell_switch">
					<div class="weui-cell__bd">匿名购买</div>
					<div class="weui-cell__ft">
						<input class="weui-switch" type="checkbox">
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd"><label for="name" class="weui-label">用餐人数</label></div>
					<div class="weui-cell__bd" style="color:#999999 ;">
						<input class="weui-input weui-cell__ft" id="job" type="text" value="">
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd"><label for="name" class="weui-label">订单备注</label></div>
					<div class="weui-cell__bd" style="color:#999999 ;">
						<input class="weui-input weui-cell__ft" id="mobile" type="text" value="">
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<p>发票抬头</p>
					</div>
					<div class="weui-cell__ft">商家暂不支持开发票</div>
				</div>
			</div>
			<!--//以下是固定在底部的提交订单-->
			<div class="mayue-foot">
				<div class="mayue-foot-1"><span>待支付￥</span><span v-html="mayuezongjia"> </span></div>
				<div class="mayue-foot-2" @click="system">提交订单</div>
			</div>
		</div>
		
		<script src="../lib/jquery-2.1.4.js"></script>    
		<script src="../js/vue.js"></script>
		<script src="../js/jquery-weui.min.js"></script>
		<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/av-min-2.1.2.js" type="text/javascript"></script>
		<script>
			//以下这些是插件的商品
			$("#return").click(function() {
				history.go(-1);
			})
			$("#time").datetimePicker({
				title: '出发时间',
				min: "1990-12-12",
				max: "2022-12-12 12:12",
				onChange: function(picker, values, displayValues) {
					console.log(values);
				}
			});
			$("#job").select({
				title: "用餐人数",
				items: ["1人", "2人", "3人", "4人", "5人", "6人", "7人", "8人", "9人", "10人", "10人以上"],
			});
			$("#mobile").select({
				title: "订单备注",
				items: ["不要辣", "少点辣", "多点辣", "不要香菜", "不要洋葱", "多点醋", "多点葱", "8人"]
			});
			//以下为vue
			var newvue = new Vue({
			     el:"body",
			     data:{
			        list:"",
			        address:"",
			        mayue:0,
		    mayuezongjia:0,
			     },
			  //创建成功后执行的函数
				created: function() {
					var APP_ID = '9etyUbhi95RBWTaoLBTyW5HP-gzGzoHsz';
					var APP_KEY = '6IkehXVEvUELlpo1SAf1c8PR';
					AV.init({
						appId: APP_ID,
						appKey: APP_KEY
					});
					// 查询到商品后，在前端展示到相应的位置中。
					var query = new AV.Query('shopping');
					query.find().then(function(product) {
						   console.log("获取数据成功");
						   newvue.list = product;
						   	var zongjia = 0;
							for(var i = 0; i < product.length; i++) {
								zongjia += parseInt(product[i].attributes.cartprice)*parseInt(product[i].attributes.cartnum);
							}
							newvue.mayuezongjia = zongjia.toFixed(2);
					}).catch(function(error) {
						console.log("获取数据失败");
					});
                     var value1 = window.localStorage.key(0);
                     console.log(value1);
                     this.mayue = value1;
                    var ff =  window.localStorage.getItem(value1)
                    console.log(ff);
                    if (value1==1) {
                    	console.log(this)
                    	 this.address = ff;
                    } else{
                    	 this.address = "请选择一个收获地址";
                    	console.log(this)
                    	
                    }
                    
				},
				methods:{
					chooseaddress:function  () {
						location.href="../adress/adress.html";
					},
					system:function  () {
					   window.localStorage.removeItem(1);
						alert("由于系统维护，无法提交，带来的不变敬请谅解");
					},
				}
			});
			
		</script>
	</body>

</html>